<template>
	<view class="addgoodinfo">
		<view class="top">
			<view class="nearbyItem">
				<image :src="host + shopMsg.img[0]" mode="aspectFill"></image>
				<view class="shopInfo">
					<view class="shoptitle">{{shopMsg.title}}</view>
					<view class="xj">
						<view class="xjbox">
							<Star :score="shopMsg.xj" />
						</view>
						<text class="pull-right">{{shopMsg.distance/1000}}km</text>
					</view>
					<view class="address">
						{{shopMsg.address}}
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="title">
				投诉原因
			</view>
			<view class="content">
				<textarea v-model="content" placeholder-style="color:#ddd" placeholder="请输入您投诉的内容和原因，以便我们为您提供更 好的服务。" />
				</view>
		</view>
		<view class="item">
			<view class="title">
				上传图片
			</view>
			<view class="content imgBox">
				<imageUpload @onUploadChange='handleChooseImage' :uploadType="'identify'" :type="'md'" :prop_photos='images'/>
			</view>
		</view>
		<view class="add"  @click="add">
			<text>确定</text>
		</view>
		<image-compress style="position: absolute; top: 0rpx; overflow: hidden;" ref='imageCompress' />
	</view>
</template>

<script>
	import imageUpload from '../components/public/image-upload.vue'
	import { info, feedback} from "../../apis/shop/api.js"
	import Star from '../components/public/star.vue'
	
	export default{
		data(){
			return{
				image:[],
				images:[],
				content:"",
				active:"",
				shopMsg:"",
				params:{
					store_id: "", // 门店id
					latitude: "", //经纬度
					longitude: "",
				},
			}
		},
		computed:{
			host (){
				return this.$baseHost.car
			}
		},
		components: {
			Star,
			imageUpload
		},
		onLoad(option) {
			let location = uni.getStorageSync("location");
			this.params.store_id = option.store_id;
			this.params.latitude = location.latitude;
			this.params.longitude = location.longitude;
			this.getdata()
		},
		methods:{
			handleChooseImage(item, list) {
				this.images = list
			},
			add(){
				let that = this
				feedback({
					content:that.content,
					images:that.images,
					type:4
				}).then(res=>{
					if(res.code == 1){
						uni.showToast({
							title:res.info
						})
						setTimeout(function(){
							uni.navigateBack();
						},1000)
						
					}
				})
			},
			getdata(){
				let that = this
				info(this.params).then(res=>{
					if(res.code == 200){
					res.data.store.xj&&(	res.data.store.xj =res.data.store.xj.toFixed(1))
						that.shopMsg = res.data.store
						
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.nearbyItem {
		padding: 30rpx 0;
		
		&::after {
			content: "";
			display: block;
			height: 0;
			overflow: hidden;
			clear: both;
		}
		
		image {
			width: 175rpx;
			height: 175rpx;
			float: left;
		}
		
		.shopInfo {
			float: left;
			margin-left: 30rpx;
			width: calc(100% - 205rpx);
		
			.shoptitle {
				color: #1A1A1A;
				font-size: 32rpx;
			}
		
			.xj {
				margin: 18rpx 0;
				width: 100%;
		
				&::after {
					content: "";
					display: block;
					height: 0;
					overflow: hidden;
					clear: both;
				}
		
				.xjbox {
					float: left;
		
					&::after {
						content: "";
						display: block;
						height: 0;
						overflow: hidden;
						clear: both;
					}
		
					image {
						width: 24rpx;
						height: 24rpx;
						float: left;
						margin-right: 5rpx;
		
					}
				}
		
				text {
					// float: right;
					// font-size: 24rpx;
					// color: #666;
				}
			}
		
			.address {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
	.addgoodinfo{
		padding:30rpx;
	}
	.title{
		padding: 18rpx 30rpx;
		font-size: 28rpx;
		color: #999999;
		background-color: #f8f8f8;
		margin:0 -30rpx;
		text{
			font-size: 24rpx;
			color: #CCCCCC;
		}
	}
	.item{
		.content{
			padding: 40rpx 0;
			textarea{
				width: 100%;
				height: 200rpx;
			}
		}
	}
	.imgBox {
		width: 100%;
		min-height: 240rpx;
		padding: 10rpx 0;
		image {
			width: 200rpx;
			float: left;
			margin: 0 10rpx;
			height: 200rpx;
		}
	}
	.add {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 166rpx;
		padding: 30rpx;
		box-shadow: -1px -2px 7px 0px rgba(0, 0, 0, 0.1);
	
		text {
			display: block;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #E41805;
			color: #fff;
			text-align: center;
			border-radius: 10rpx;
		}
	
	}
	.chooseImage {
		width: 220rpx;
		height: 220rpx;
		background-color: #F2F2F2;
		float: left;
		margin: 6rpx;
		font-size: 24rpx;
		color: #c5c5c5;
		position: relative;
		.iconadd {
			font-size: 50rpx;
		}
	
		&.chooseImage2 {
			width: 200rpx;
			height: 200rpx;
		}
	
		image {
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
	}
</style>
